<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .bot {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -moz-box-flex: 1;
        flex: 1;
        border-radius: 10px;
        background: #f3f3f3;
        color: #333333;
        padding: 5px;
        position: relative;
        height: 20px;
    }

    .input {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        border: none;
        background: beige;
    }

    .masx {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        width: 100%;
        border: none;
        background: red;
        z-index: 100;
    }

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .6);
        display: none;
        z-index: 1;
    }

    #input2 {
        display: none;
        z-index: 999;
        background: #fff;
    }
    </style>
</head>

<body>
    <div class="bot" id="bot">
        <input type="text" class="input" id="input">
        <div class="masx" onclick="inputClick()"></div>
    </div>
    <textarea id="input2" autofocus onblur="textBlur()"></textarea>
    <div class="mask" id="mask" onclick="maskClick()"></div>
    </div>
    <script>
    function inputClick() {
        document.getElementById('input2').style.display = 'block';

        document.getElementById('bot').style.display = 'none';
        document.getElementById('input').focus()
        document.getElementById('mask').style.display = 'block';

    }

    function maskClick() {
        document.getElementById('bot').style.display = 'block';
        // document.getElementById('mask').style.display='none';
        document.getElementById('input2').style.display = 'none';
    }

    function textBlur() {
        alert(1111)
    }
    </script>
</body>

</html>